<template>
	<view class="equipment">
		<scroll-view class="control" :scroll-x="true" :show-scrollbar="false">
			<view class="control_scroll">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#007aff"></uni-segmented-control>
			</view>
		</scroll-view>
		<view class="content">
			<view v-for="(item,index) in items" :key="item">
				<view v-if="current === index">
					<cardList :type='index' :refresh="refresh" :reach="reach" :flag="flag" :stationId="stationId" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cardList from "./cardList.vue"
	export default {
		props: {
			refresh: Boolean,
			reach: Boolean,
			pushCurrent: Number,
			flag: {
				type: String,
				default: '0'
			},
			stationId: {
				type: String,
				default: ''
			}
		},
		components: {
			cardList
		},
		data() {
			return {
				items: ['采集器', '逆变器', '监控器', "优化器", "电表", "机器人"],
				current: 1
			};
		},
		mounted() {
			this.current = this.pushCurrent
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
		},
	}
</script>

<style scoped lang='scss'>
	.equipment {
		.control {
			background-color: #fff;
			padding: 10rpx 0;

			.control_scroll {
				width: 130%;
			}

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}
		}
	}
</style>